<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="outsideShell">
			<select id="wager">
				<option value ="1">请选择大小</option>
				<option value="big">大</option>
				<option value="small">小</option>
			</select>
			<div  style="width: 120px; height: 120px;">
				<img src="img/1.jpg" id="image" >
			</div>
			<button type="button" onclick="doAction(event)">开始</button>
		</div>
	</body>
	<script type="text/javascript">
		
		function doAction(event){
			if(document.getElementById('wager').value == 1){
				alert('请选择赌注');
				location.reload();
			}
			
			var image =  document.getElementById('image');
			var times = 0;
			var myInterval = setInterval(function(){
				if(times>=20){
					clearInterval(myInterval);
					event.target.innerText = '结束'
				}
				var result = getrandom();
				image.src = 'img/'+result+'.jpg'
				times++;
			},100)
		}
		function getrandom(){
			
			while(true){
				var result = Math.floor(Math.random()*10);
				if(result <= 6 && result >0){
					break;
				}
			}
			return result;
		}
	</script>
</html>
